<template>
  <div class="pad-content-box form-no-padding-box">
    <el-form label-width="130px" size="small" :model="searchParams" ref="rechargeForm">
      <el-row :gutter="50">
        <el-col :span="8">
          <el-form-item label="收款批次" prop="batchNo">
            <el-input v-model="searchParams.batchNo" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收款公司" prop="payer">
            <el-input v-model="searchParams.payer" clearable placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收款账户" prop="paymentAccount">
            <el-input v-model="searchParams.paymentAccount" clearable placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收款人" prop="operatorName">
            <el-input v-model="searchParams.operatorName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收款方式" prop="paymentMethod">
            <el-select v-model="searchParams.paymentMethod" clearable filterable>
              <el-option v-for="item in actualIncomePaymentMethod" :key="item.key" :label="item.value" :value="item.key" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称" prop="customerInfoKeyData" :rules="[{ required: true, message: '请选择', trigger:['change','blur']}]">
            <el-select v-model="searchParams.customerInfoKeyData" value-key="primaryKey" 	 clearable filterable  @change="function(item){ return changeCustomer(item)}">
              <el-option v-for="item in clientList" :key="item.primaryKey" :label="item.partnerName" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同编号" prop="contractKeyData" :rules="[{ required: true, message: '请选择', trigger:['change','blur']}]">
              <el-select v-model="searchParams.contractKeyData" value-key="primaryKey"  clearable filterable @change="function(item){ return changeContract(item)}">
                <el-option v-for="item in contractList" :key="item.primaryKey" :label="item.contractCode" :value="item" />
              </el-select>
            </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="资产名称" prop="rentCycleKey" :rules="[{ required: true, message: '请选择', trigger:['change','blur']}]">
            <el-select v-model="searchParams.rentCycleKey" clearable filterable >
              <el-option v-for="item in assetList" :key="item.primaryKey" :label="item.assetName" :value="item.primaryKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="费项名称" prop="rechargeType" :rules="[{ required: true, message: '请选择', trigger:['change','blur']}]">
            <el-select v-model="searchParams.rechargeType" clearable filterable>
              <el-option v-for="item in chargeList" :key="item.key" :label="item.value" :value="item.key" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收款时间" prop="collectionTime" :rules="[{ required: true, message: '请选择', trigger:['change','blur']}]">
            <el-date-picker 
              v-model="searchParams.collectionTime" 
              type="date"
              value-format="timestamp"
              placeholder="请选择"> 
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收款金额" prop="receivedAmount">
            <el-input v-model="searchParams.receivedAmount" placeholder="请输入"  clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="银行流水号" prop="serialNumber">
            <el-input v-model="searchParams.serialNumber" placeholder="请输入"  clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="description">
            <el-input placeholder="请输入" type="textarea" v-model="searchParams.description" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="closeDialog({success:false})" size="small" class="el-button-reset">取 消</el-button>
      <el-button type="primary" size="small" @click="save()">确 定</el-button>
    </div>
  </div>
</template>

<script>
  import {apiContractByClient,apiAssetList,rechargeCreate} from '../../../api/preCharge';
  export default {
    name: 'salesReport',
    props:{
      clientList:{
        type:Array,
        default:()=>{
          return []
        }
      },
      chargeList:{
        type:Array,
        default:()=>{
          return []
        }
      },
      actualIncomePaymentMethod:{
        type:Array,
        default:()=>{
          return []
        }
      }
    },
    data() {
      return {
        searchParams:{},
        contractList:[],
        assetList:[],
      };
    },
    created() {
      this.searchParams.operatorName = JSON.parse(localStorage.getItem('userInfo')).nickname
    },
    methods: {
      //选择客户
      changeCustomer(item){
        this.searchParams.customerInfoName = item.partnerName
        this.searchParams.customerInfoKey = item.primaryKey
        this.getContractList(item.primaryKey)
      },
      //选择合同
      changeContract(item){
        this.searchParams.contractCode = item.contractCode
        this.searchParams.contractKey = item.primaryKey
        this.getChargeItemList(item.contractCode)
      },
      //合同
      async getContractList(customerKey) {
        let res = await apiContractByClient({
          partnerKey: customerKey,
        });
        this.contractList = res.rows || [];
      },
      //资产 事项 assetType 空的代表是事项 不为空代表是资产
      async getChargeItemList(contractCode) {
        let assetList = [];
        let res = await apiAssetList({ contractCode: contractCode, status: 2 });
        res.rows.forEach(item => {
          if (item.assetType) {
            assetList.push(item);
          }
        });
        this.assetList = assetList;
      },
      async save() {
        this.$refs.rechargeForm.validate(async valid => {
          if (valid) {
            let res = await rechargeCreate({...this.searchParams,projectKey:localStorage.getItem('projectKey')})
            this.closeDialog({success:true})
          }
        });
      },
      closeDialog(data){
        this.$emit('closeDialog',data)
        this.searchParams = {}
      }
    },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .has-tab-header-border .el-tabs__header {
    border: none;
  }
  .dialog-footer{
    display: flex;
    justify-content: flex-end;
    margin-top:10px;
  }
</style>
